<template>
    <div style="width: 100%;">
        <template v-for="(item, index) in menu">
            <el-sub-menu :index="item.idxUri" v-if="item.children" :key="index">
                <template #title>
                    <i v-if="item.icon" :class="'iconfont ' + item.icon"></i>
                    <!-- <el-icon>
                        <location />
                    </el-icon> -->
                    <span  class="m_l_5 size">{{ item.name }}</span>
                </template>

                <Menu :menu="item.children" class="menu"></Menu>
            </el-sub-menu>
            <template v-else>
                <el-menu-item :index="item.idxUri" :key="index">
                    <i v-if="item.icon" :class="'iconfont ' + item.icon"></i>
                    <span  class="m_l_5 size">{{ item.name }}</span>
                </el-menu-item>
            </template>
        </template>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, onUpdated, onBeforeUpdate } from 'vue'
type Item ={
    name: string,
    path: string,
    icon: string,
    idxUri:string,
    children: Item[]

}
export default defineComponent({
    name: 'Menu',
    props: {
        menu: { type: Array as () => Item[], default: [] },
    },
    setup() {
        const data = reactive({
        })
        onBeforeMount(() => {
        })
        onMounted(() => {
        })
        onBeforeUpdate(() => {
        })
        onUpdated(() => {
        })
        onUnmounted(() => {
        })
        onBeforeUnmount(() => {
        })
        return {
            ...toRefs(data),
        }
    }
})
</script>
<style scoped lang='scss'>
.size{
    color: rgba(255, 255, 255, 0.55); 
}
</style>